<template>
    <div class="header">
        <div class="logo">四川工商学院实验室管理系统</div>
        <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    <img class="user-logo" src="../../../static/img/img.jpg">
                    {{username}}
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="person" >查看资料</el-dropdown-item>
                    <el-dropdown-item command="updatapassword" >修改密码</el-dropdown-item>
                    <el-dropdown-item command="loginout">退 出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-dialog title="个人信息" :visible.sync="outerVisible">
                <el-form ref="form" :model="form">
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="form.username" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="学号/工号" :label-width="formLabelWidth">
                        <el-input v-model="form.student_id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="E-mail" :label-width="formLabelWidth">
                        <el-input v-model="form.email" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" :label-width="formLabelWidth">
                        <el-input v-model="form.tel"></el-input>
                    </el-form-item>
                </el-form>
            <div  slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onSubmit">立即修改</el-button>
            <el-button @click="outerVisible=false">退 出</el-button>
        </div>
        </el-dialog>
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
            <el-form :model="xiuform">
                <el-form-item label="旧密码" :label-width="formLabelWidth" >
                    <el-input v-model="xiuform.oldpassword" auto-complete="off" type="password"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="xiuform.newpassword" auto-complete="off" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" :label-width="formLabelWidth">
                    <el-input v-model="xiuform.newpassword1" auto-complete="off" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">

                <el-button type="primary" @click="xiugai">立即修改</el-button>
                <el-button @click="dialogFormVisible = false">退 出</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                outerVisible: false,
                dialogFormVisible:false,
                formLabelWidth: '120px',
                form:{
                username:'',
                email:'',
                tel:'',
                student_id:'',
                name:''
            },
                xiuform:{
                    oldpassword:'',
                    newpassword:'',
                    newpassword1:''
                }
            }
        },
        computed:{
            username(){
                let username = localStorage.getItem('ms_username');
                return username ? username : this.form.username;
            }
        },
        created(){
            this.getData();
        },
        methods:{
            handleCommand(command) {
                if(command == 'loginout'){
                    this.$axios.get('/text/logout').then((res)=>{
                        this.$router.push('/login');
                    });

                }
                else if(command == 'person'){
                    this.outerVisible=true;
                }
                else if(command == 'updatapassword'){
                    this.dialogFormVisible=true;
                }
            },
            getData(){
                this.$axios.get('/text/personalinformation?username='+ this.username).then((res) => {
                   this.form=res.data;
                })
            },
            onSubmit(){
                this.$axios.post('/text/modifyinformation?'+
                    'username='+this.form.username+
                    '&email='+this.form.email+
                    '&tel='+this.form.tel+
                    '&student_id='+this.form.student_id+
                    '&name='+this.form.name
                ).then((res) => {
                    if(res.data.code==200){
                        this.$message({
                            message: '修改信息成功',
                            type: 'success'
                        });

                    }
                    else{
                        this.$message.error("修改失败！！！");
                    }
                })
            },
            xiugai(){
                if(this.xiuform.newpassword== this.xiuform.newpassword1){
                    this.$axios.post('text/changepassword?' +
                        "newpassword=" + this.xiuform.newpassword+
                        "&oldpassword=" + this.xiuform.oldpassword
                    ).then((res) => {
                        if(res.data.code==200){
                            this.$confirm('修改密码成功，点击确定跳转到登录界面！', '提示', {
                                confirmButtonText: '确定',
                                type: 'success',
                                center: true
                            }).then(() => {
                                this.$router.push('/login')
                            });

                        }
                        else if(res.data.code==422)
                            this.$message.error('原密码输入错误，请重新输入！！');
                        else
                            this.$message.error('修改失败！！');
                    })
                }
                else {
                    this.$message.error('两次输入的密码不一致！！');
                }
            }
        }
    }
</script>
<style scoped>
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: 22px;
        line-height: 70px;
        color: #fff;
    }
    .header .logo{
        float: left;
        width:310px;
        text-align: center;
    }
    .user-info {
        float: right;
        padding-right: 50px;
        font-size: 16px;
        color: #fff;
    }
    .user-info .el-dropdown-link{
        position: relative;
        display: inline-block;
        padding-left: 50px;
        color: #fff;
        cursor: pointer;
        vertical-align: middle;
    }
    .user-info .user-logo{
        position: absolute;
        left:0;
        top:15px;
        width:40px;
        height:40px;
        border-radius: 50%;
    }
    .el-dropdown-menu__item{
        text-align: center;
    }
</style>
